System Container Margins#

The contentMargins modifier configures custom margins around a view’s content. This allows precise control over layout spacing, particularly in scrollable containers such as ScrollView, List, or Form. You can apply margins uniformly or selectively to certain edges and placement contexts.

#Type

contentMargins?: 
  | number
  | EdgeInsets
  | {
      edges?: EdgeSet
      insets: number | EdgeInsets
      placement?: ContentMarginPlacement
    }

#Parameters

#insets (required)

Defines the margin values to apply. You can provide:

• A single number (applied to all specified edges)
• An EdgeInsets object for per-edge customization

#Example – uniform insets:

<ScrollView
  contentMargins={20}
>
  <Text>Applies 20 points of margin on all sides</Text>
</ScrollView>

#Example – edge-specific insets:

<ScrollView
  contentMargins={{
    top: 10,
    bottom: 30,
    leading: 16,
    trailing: 16
  }}
>
  <Text>Custom edge insets</Text>
</ScrollView>

#edges (optional)

Defines which edges the insets should apply to. If omitted, all edges are used.

#Type

type EdgeSet = "top" | "bottom" | "leading" | "trailing" | "vertical" | "horizontal" | "all"

#Example – apply to top and bottom only:

<ScrollView
  contentMargins={{
    edges: "vertical",
    insets: 12
  }}
>
  <Text>Vertical-only margins</Text>
</ScrollView>

#placement (optional)

Specifies where in the layout the margins should be applied. This is especially relevant in scrollable views that have both scrollable content and indicators.

#Type

type ContentMarginPlacement = "automatic" | "scrollContent" | "scrollIndicators"

#Options

#Example – margin applied only to scrollable content:

<ScrollView
  contentMargins={{
    insets: 24,
    placement: "scrollContent"
  }}
>
  <Text>Scroll content margins only</Text>
</ScrollView>

#Full Configuration Example

<ScrollView
  contentMargins={{
    edges: "horizontal",
    insets: { leading: 20, trailing: 20, top: 0, bottom: 0 },
    placement: "scrollContent"
  }}
>
  <VStack spacing={10}>
    <Text>Margin is applied only to horizontal scroll content area</Text>
  </VStack>
</ScrollView>

#Summary

#System container margin guide (iOS 27.1+)

contentMargins also accepts { guide: "container", edges?: EdgeSet, alignment?: Alignment }. It uses the system container margin guide rather than a numeric inset. Edges default to all, and omitted alignment uses native automatic alignment. Earlier systems ignore this form; existing number/insets/placement forms retain their behavior. Direct and fluent modifiers support it.

<VStack contentMargins={{ guide: "container", edges: "horizontal", alignment: "leading" }}>
  <Text>Aligned content</Text>
</VStack>